#HTML <video>

The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.

#Attributes

• autoplay: A Boolean attribute; if specified, the video automatically begins to play back as soon as it can without stopping to finish loading the data.

  Note: Modern browsers block audio (or videos with an unmuted audio track) from autoplaying, as sites that automatically play audio can be an unpleasant experience for users. See our autoplay guide for additional information about how to properly use autoplay.

  To disable video autoplay, autoplay="false" will not work; the video will autoplay if the attribute is there in the <video> tag at all. To remove autoplay, the attribute needs to be removed altogether.

• controls: If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.

• controlslist: The controlslist attribute, when specified, helps the browser select what controls to show for the video element whenever the browser shows its own set of controls (that is, when the controls attribute is specified).

  The allowed values are nodownload, nofullscreen and noremoteplayback.

  Use the disablepictureinpicture attribute if you want to disable the Picture-In-Picture mode (and the control).

• crossorigin: This enumerated attribute indicates whether to use CORS to fetch the related video. CORS-enabled resources can be reused in the <canvas> element without being tainted. The allowed values are:

  • anonymous: Sends a cross-origin request without a credential. In other words, it sends the Origin: HTTP header without a cookie, X.509 certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header), the resource will be tainted, and its usage restricted.
  • use-credentials: Sends a cross-origin request with a credential. In other words, it sends the Origin: HTTP header with a cookie, a certificate, or performing HTTP Basic authentication. If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the resource will be tainted and its usage restricted.

  When not present, the resource is fetched without a CORS request (i.e., without sending the Origin: HTTP header), preventing its non-tainted use in <canvas> elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

• disablepictureinpicture: Prevents the browser from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases.

• disableremoteplayback: A Boolean attribute used to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc.).

  In Safari, you can use x-webkit-airplay="deny" as a fallback.

• height: The height of the video's display area, in CSS pixels (absolute values only; no percentages).

• loop: A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.

• muted: A Boolean attribute that indicates the default audio mute setting contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning the audio will be played when the video is played.

• playsinline: A Boolean attribute indicating that the video is to be played "inline", that is, within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.

• poster: A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

• preload: This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience regarding what content is loaded before the video is played. It may have one of the following values:

  • none: Indicates that the video should not be preloaded.
  • metadata: Indicates that only video metadata (e.g., length) is fetched.
  • auto: Indicates that the whole video file can be downloaded, even if the user is not expected to use it.
  • empty string: A synonym of the auto value.

  The default value is different for each browser. The spec advises it to be set to metadata.

  Note:

  • The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the video for playback.
  • The specification does not force the browser to follow the value of this attribute; it is a mere hint.

• src: The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.

• width: The width of the video's display area, in CSS pixels (absolute values only; no percentages).